<template>
	<view class="cu-form-group">
		<view class="title text-gray">选择分类</view>
		<picker @change="PickerChange" :value="index" :range="picker" range-key="name" data-id="picker[index].id">
			<view class="picker">
				<view class="text-lg color-place" v-if="index == -1">
					请选择
				</view>
				<view v-else>{{ picker[index].name }}</view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
			};
		},
		props: ['picker'],
		methods: {
			PickerChange(e) {
				const index =  e.detail.value
				this.index = index;
				if(index > -1){
					const id = this.picker[index].id;
					this.$emit('idOfSelected',id)
				}
			}
		}
	}
</script>

<style>
	.cu-form-group{
		padding: 0;
	}
	.cu-form-group picker .picker {
		text-align: left;
	}
</style>
